<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <navbar></navbar>
    <div class="content search-content">
      <!--      <h2>标题-Title</h2>-->
      <search-com type="1" @outputSearchData="receiveSearchData"></search-com>
    </div>
    <div class="content">
      <h3 class="card-title">基础数据</h3>
      <div class="base-data-list">
        <template class="base-data-item" v-for="(item, index) in baseDataList">
          <basic-data :basicDataItem="item" :basicDataItemIndex="index"></basic-data>
        </template>
      </div>
    </div>
    <div class="content sale-chart">
      <div class="sale-chart-left">
        <h3 class="card-title"><label>销售总额7天变化趋势</label></h3>
        <div class="card-header">
          <div class="card-total">
            <div class="card-total-left"><span>￥</span><label>23,456.00</label></div>
            <div class="card-total-right"><label>合计</label><span>￥</span><label>13,456.00</label></div>
          </div>
          <div class="card-ratio">
            <div class="card-ratio-left">
              <p class="data-green">
                <span class="arrow south-east">&#8600;</span>
                <span class="arrow north-east">&#8599;</span><label>环比增长</label>+25%
              </p>
            </div>
            <div class="card-ratio-right"><label>均值</label><span>￥</span><label>43,410.00</label></div>
          </div>
        </div>
        <div class="card-body">
          <total-sales :config="trend.config" :dataList="trend.dataList"></total-sales>
        </div>
      </div>
      <div class="sale-chart-right">
        <h3 class="card-title"><label>下单金额分布占比</label></h3>
        <distribution :config="orderAmount.config" :dataList="orderAmount.dataList"></distribution>
      </div>
    </div>

    <div class="content">
      <h3 class="card-title"><label>员工排行榜</label>
        <div class="staff-button-list">
          <el-button size="small" :type="currentChooseStaff == item.value? 'primary':'info'" plain
                     v-for="item in staffButtonList" @click="onChangeStaffType(item.value)">{{ item.name }}
          </el-button>
          <el-button size="small" @click="onDownloadStaff()" class="download-table" icon="el-icon-download" ></el-button>
          <!--            <el-button size="small" @click="onDownloadStaff()" class="download-table">&#8595;</el-button>-->
        </div>
      </h3>
      <data-board-table :dataList="page.list" :config="staffTableConfigs.list" :sortObj="staffTableConfigs.sortObj"></data-board-table>
      <!-- 员工排行榜 分页start -->
      <div class="page" v-if="page.totalNum >= 8">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNo"
            :page-sizes="[3, 5, 10, 20, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalNum"
            prev-text="上一页"
            next-text="下一页"
        >
        </el-pagination>
      </div>
      <!-- 员工排行榜 分页end -->
    </div>
    <div class="content">
      <h3 class="card-title"><label>近一年员工业绩</label>
        <div class="staff-button-list">
          <el-button size="small" @click="onDownloadStaff()" class="download-table" icon="el-icon-download" ></el-button>
          <!--            <el-button size="small" @click="onDownloadStaff()" class="download-table">&#8595;</el-button>-->
        </div>
      </h3>
      <data-board-table :dataList="page.list" :config="staffTableAchievement.list" :sortObj="staffTableAchievement.sortObj" @tableShowDetail="showDetail"></data-board-table>
      <!-- 近一年员工业绩 分页start -->
      <div class="page" v-if="page.totalNum >= 8">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageNo"
            :page-sizes="[3, 5, 10, 20, 50]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalNum"
            prev-text="上一页"
            next-text="下一页"
        >
        </el-pagination>
      </div>
      <!-- 近一年员工业绩 分页end -->
    </div>

    <!--========================== el-dialog =================================-->
    <el-dialog
        :title="dialog.title"
        :visible.sync="dialog.visible"
        :width="dialog.width"
        :append-to-body="true"
    >
      <!-- 员工业绩统计-->
      <template v-if="dialog.type === 'performanceStatistics'">
        <el-button size="small" type="primary" plain class="performanceStatistics-download" @click="performanceStatisticsDownload">下载</el-button>
        <data-board-table :dataList="page.list" :config="staffTableConfigs.list" :sortObj="staffTableConfigs.sortObj"></data-board-table>
        <!-- 员工排行榜 分页start -->
        <div class="page" v-if="page.totalNum >= 8">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.pageNo"
              :page-sizes="[3, 5, 10, 20, 50]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.totalNum"
              prev-text="上一页"
              next-text="下一页"
          >
          </el-pagination>
        </div>
        <!-- 员工排行榜 分页end -->
      </template>

    </el-dialog>
    <!--=========================== el-dialog end================================-->
  </div>
</template>

<script>
import navbar from '@/components/navbar.vue'
import SearchCom from './components/SearchCom.vue'
import BasicData from './components/BasicData.vue'
import TotalSales from './components/TotalSales.vue'
import Distribution from './components/Distribution.vue'
import DataBoardTable from './components/DataBoardTable.vue'
export default {
  components: { navbar, SearchCom, BasicData, TotalSales, Distribution, DataBoardTable },
  name: 'staffDate',
  data () {
    return {
      loading: false,
      page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 },
      baseDataList: [
        { title: '销售总额', totalNumber: '15208', increase: '75.00' },
        { title: '订单数', totalNumber: '2715280.006', increase: -5.01 },
        { title: '客单价', totalNumber: '520.8', increase: '55.00' },
        { title: '复购人数', totalNumber: '520.8', increase: '55.00' },
        { title: '退款订单数', totalNumber: '520.8', increase: '55.00' },
        { title: '退款用户数', totalNumber: '520.8', increase: '55.00' },
        { title: '退款率', totalNumber: '520.8', increase: '55.00' },
        { title: '新增客户数', totalNumber: '18.04', increase: -15 }
      ],
      currentChooseStaff: 1, // 当前选择员工类型
      staffButtonList: [
        { name: '个人', value: 1 },
        { name: '小组', value: 2 },
        { name: '团队', value: 3 }
      ],
      trend: { // 销售总额7天变化趋势
        config: {
          dateList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        dataList: [
          {
            color: '#4168e7',
            name: 'GMV',
            list: [56.5, 82.1, 88.7, 70.1, 53.4, 85.1, 56.5, 82.1, 88.7, 70.1, 53.4, 85.1]
          },
          {
            color: '#14d8cb',
            name: '环比金额',
            list: [16.5, 42.1, 78.7, 64.1, 23.4, 89.1, 46.5, 32.1, 68.7, 80.1, 55.4, 75.1]
          }
        ]
      },
      orderAmount: { // 下单金额分布占比
        config: {
          color: ['#4168e7', '#14d8cb', '#1ccf79', '#ffd83b', '#f65570', '#9850fc']
        },
        dataList: [
          { value: 422, name: '360元以上' },
          { value: 335, name: '315-360元' },
          { value: 310, name: '270-315元' },
          { value: 265, name: '220-270元' },
          { value: 215, name: '180-220元' },
          { value: 152, name: '0-180元' }
        ]
      },
      staffTableConfigs: { // 员工排行榜
        sortObj: { prop: 'marketPrice', order: 'descending'}, // 排序
        list:[
          { type: 'index', label: '排名', width: 60 },
          { prop: 'brandName', label: '姓名' },
          { prop: 'categoryId', label: '订单数' },
          { prop: 'id', label: '销售额' },
          { prop: 'marketPrice', label: '商品数量' },
          { prop: 'soldNum', label: '资源入线数' },
          { prop: 'status', label: '资源单数' },
          { prop: 'stock', label: '资源金额' },
          { prop: 'goodsNo', label: '资源成交率' },
          { prop: 'goodsNo', label: '3天内成交订单数' },
          { prop: 'goodsNo', label: '3天内成交订单金额' },
          { prop: 'goodsNo', label: '3天内成交订率' },
          { prop: 'goodsNo', label: '7天内成交订单数' },
          { prop: 'goodsNo', label: '7天内成交订单金额' },
          { prop: 'goodsNo', label: '7天内成交订率' },
          { prop: 'goodsNo', label: '售后订单数' },
          { prop: 'goodsNo', label: '取消订单数' },
          { prop: 'goodsNo', label: '签收金额' },
          { prop: 'goodsNo', label: '签收订单数' },
          { prop: 'goodsNo', label: '签收率', sortable: true }
        ]
      },
      staffTableAchievement: { // 员工业绩
        sortObj: { prop: 'marketPrice', order: 'descending'}, // 排序
        list:[
          { prop: 'brandName', label: '时间' },
          { prop: 'categoryId', label: '下单数' },
          { prop: 'id', label: '老客下单数' },
          { prop: 'marketPrice', label: '新客下单数' },
          { prop: 'soldNum', label: '新客下单率' },
          { prop: 'status', label: '复购率' },
          { prop: 'stock', label: '下单金额' },
          { prop: 'goodsNo', label: '老客下单金额' },
          { prop: 'goodsNo', label: '新客下单金额' },
          { prop: 'goodsNo', label: '老客下单金额占比' },
          { prop: 'goodsNo', label: '新客下单金额占比', sortable: true },
          { prop: 'operate', label: '操作', slot: 'button', fixed: 'right', width: 100, align: 'center' }
        ]
      },
      /**
       * visible  是否显示
       * title    弹窗标题
       * type     类型
       * width    默认宽
       * row      参数
       * batch    是否批量
       */
      dialog: { visible: false, title: '编辑', width: '640px', type: '', row: {}, batch: false }
    }
  },
  created () {
    this.fetchData()
  },
  mounted () {
    this.$nextTick(_ => {
      console.log('mounted this.$nextTick')
      this.baseDataInit() // 基础数据初始化 格式
    })
  },
  methods: {
    receiveSearchData (value) {
      console.log('接收SearchData', value)
    },
    fetchData (type) {
      this.loading = true
      if (type === 'reset') {
        // 清空表单，还原数据
        this.$refs['searchForm'].resetFields()
        this.page.pageNo = 1
        this.page.pageSize = 8
      }
      let params = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        status: this.page.status
      }
      if (type === 'search') {
        params.pageNo = 1
      }
      const searchForm = this.searchForm
      params = Object.assign(params, searchForm)
      // params.categoryId = searchForm.categoryId[searchForm.categoryId.length - 1]
      // 去除字符串 前后 空格
      for (const item in params) {
        if (params[item] === '') { delete params[item] }
        continue
        if (typeof params[item] === 'string') { params[item] = params[item].trim() }
      }
      this.$api.goodsPageList(params).then((res) => {
        if (res.code === 0) {
          this.imageArr = []
          res.data.list.forEach(e => {
            if (e.mainImage && e.mainImage.indexOf('http://fenxiao.muruji.com/') !== 0) {
              e.mainImage = this.ImgHttps + e.mainImage
            }
            e.mainImageArr = []
            e.mainImageArr.push(e.mainImage)
            this.imageArr.push(e.mainImage)
          })
          this.page.list = res.data.list
          this.page.totalNum = res.data.totalNum
        } else {
          console.log('goodsPageList - 失败', type)
        }
        this.loading = false
      }).catch((err) => {
        this.loading = false
        console.log(err)
      })
    },
    // 点击页码，切换页面
    handleCurrentChange (val) {
      console.log('handleCurrentChange, 点击页码，切换页面')
      this.page.pageNo = val
      this.fetchData()
    },
    handleSizeChange (val) {
      console.log('handleSizeChange, 修改每页显示')
      this.page.pageSize = val
      this.fetchData()
    },
    baseDataInit () { // 基础数据初始化 格式
      const baseDataList = this.baseDataList
      const formatNumberFun = this.formatNumber
      baseDataList.forEach((item, index) => {
        this.baseDataList[index].totalNumber = formatNumberFun(item.totalNumber, 2)
      })
    },
    formatNumber (price, num) {
      let comma = price
      if (num) {
        comma = Number(price).toFixed(num)
      } else {
        comma = price
      }
      comma = String(comma).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      return comma
    },
    onChangeStaffType (value) { // 切换员工类型
      this.currentChooseStaff = value
    },
    onDownloadStaff () {
      console.log('onDownloadStaff')
    },
    // 表格 查看 按钮
    showDetail (row) {
      const dialog = { visible: true, title: '员工业绩统计', type: 'performanceStatistics', width: '1000px', row, batch: false }
      this.dialog = dialog
      console.log('showDetail 查看', this.dialog)
    },
    // 表格 下载 按钮
    performanceStatisticsDownload(){
      console.log('表格 下载 按钮')
    }
  }
}
</script>

<style scoped lang="scss">
@import './assets/DataCoardCommon';

.base-data-item{
  width: calc(25% - 55px);
  margin-bottom: 15px;
  &:nth-child(4){
    margin-right: 0;
  }
}
.page{
  text-align: right;
  margin: 5px auto;
  /deep/.btn-prev, /deep/.btn-next{
    padding: 0 5px;
  }
}

</style>
